<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>


<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  mounted() {
    // this.drawLine();
  },
  computed: {
    ...mapGetters(["echartsColor"]),
  },
  watch: {
    echartsColor: "drawLine", // 数值变化是更新图表
    data: "drawLine", // 数值变化是更新图表
  },
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    isLegend: {
      type: Boolean,
      default: false,
    },
    isLabel: {
      // 显示单个数据
      type: Boolean,
      default: true,
    },
    isRoseType: {
      //是否为玫瑰图
      type: Boolean | String,
      default: false,
    },
    legendTop: {
      type: String,
      default: "center",
    },
    legendLeft: {
      type: String,
      default: "",
    },
    center: {
      type: Array,
      default: () => ["center", "center"],
    },
    itemWidth: {
      type: Number | String,
      default: () => 11,
    },
    itemHeight: {
      type: Number | String,
      default: () => 11,
    },
    legendFontSize: {
      type: Number | String,
      default: () => 11,
    },
    radius: {
      type: Array | String,
      default: () => "67%",
    },
    color: {
      type: Array,
      default: () => [
        "#FAC657",
        "#EE6666",
        "#23C3FF",
        "#5470c6",
        "#91cc75",
        "#73c0de",
        "#00EBCD",
        "#CEAE00",
        "#FE6F37",
        "#FC2A2A",
        "#EE6666",
        "#73C0DE",
        "#FAC657",
        "#91CC75",
        "#EE6666",
        "#5470C6",
        "#73c0de",
        "#EE6666",
        "#FAC657",
        "#5470c6",
        "#91cc75",
        "#23C3FF",
        "#00EBCD",
        "#CEAE00",
        "#FE6F37",
        "#FC2A2A",
        "#EE6666",
        "#73C0DE",
        "#FAC657",
        "#91CC75",
        "#EE6666",
        "#5470C6",
      ],
    },
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          var _this = this;
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var option = {
            color: this.color,
            title: {
              show: false,
            },
            tooltip: {
              trigger: "item",
            },
            // legend: {
            //   type: "scroll",
            //   orient: "vertical",
            //   inactiveColor: "rgba(92,200,255,0.35)",
            //   right: 0,
            //   y: "center",
            //   itemWidth: 12,
            //   itemHeight: 12,
            //   data: [],
            //   pageIconSize: 0.6 * cw,
            //   pageIconColor: "#fff",
            //   pageTextStyle: {
            //     color: "rgba(92,200,255,1)",
            //   },
            //   textStyle: {
            //     fontSize: 8,
            //     color: "rgba(92,200,255,1)",
            //   },
            // },
            legend: {
              show: this.isLegend,
              orient: "vertical",
              right: "0%",
              left: this.legendLeft,
              top: this.legendTop,
              itemWidth: this.itemWidth,
              itemHeight: this.itemHeight,
              type: "scroll",
              pageIconSize: 8,
              pageIconColor: "#fff",
              pageTextStyle: {
                color: "#ffffff",
                fontSize: 10,
              },
              textStyle: {
                color: this.echartsColor,
                fontSize: this.legendFontSize,
              },
              // orient: 'bottom',
              itemGap: 4,
              // icon: "circle",
              formatter: function (text) {
                var strlength = text.length;
                if (strlength % 6 != 0) {
                  text = text.replace(/\S{10}/g, function (match) {
                    return match + " " + " " + "\n";
                  });
                } else {
                  text = text.replace(/\S{10}/g, function (match) {
                    return match + "\n";
                  });
                  strlength = text.length;
                  text = text.substring(0, strlength - 1);
                }
                return text;
              },
            },
            grid: {
              left: "6%",
              right: "4%",
              bottom: "1%",
              top: "10%",
              containLabel: true,
            },
            series: [
              {
                name: "类型",
                type: "pie",
                radius: this.radius,
                center: this.center,
                roseType: this.isRoseType,
                avoidLabelOverlap: false,
                data: this.data,
                avoidLabelOverlap: true, //放置重叠
                label: {
                  show: this.isLabel,
                  textStyle: {
                    fontSize: 11,
                    color: this.echartsColor,
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", () => {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>